<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>管理后台</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
		<link href="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/skin/layer.css" rel="stylesheet">
		<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
		<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.css" rel="stylesheet">
		<link href="../static/css/index.css" rel="stylesheet" />
	</head>

	<body>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：导航
        -->
<!--		<nav class="ui inverted attached segment i-padded-tb-mini i-shadow-small">
			<div class="ui container">
				<div class="ui inverted secondary stackable menu">
					<h2 class="ui teal header item">管理后台</h2>
					<a href="blogs.html" class="active i-item item i-mobile-hide"><i class="home mini icon"></i>博客</a>
					<a href="types.html" class=" i-item item i-mobile-hide"><i class="idea mini icon"></i>分类</a>
					<a href="tags.html" class="i-item item i-mobile-hide"><i class="tags mini icon"></i>标签</a>
					<div class="right menu i-item i-mobile-hide">
						<div class="ui dropdown item">
							<div class="text">
								<img class="ui avatar image" src="../static/img/avatar.png" /> 李仁密
							</div>
							<i class="dropdown icon"></i>
							<div class="menu">
								<a v-on:click="out" class="item" id="logout">注销</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<a href="#" class="ui menu toggle black button icon i-right-top i-mobile-show">
				<i class="sidebar icon"></i>
			</a>
		</nav>-->
		<div id="head"></div>
		<div class="ui attached pointing menu">
			<div class="ui container">
				<div class="right menu">
					<a href="blogs-input.html?type=add" class="item">发布</a>
					<a href="blogs.html" class="teal active item">列表</a>
				</div>
			</div>
		</div>
		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：内容
        -->
		<div class="i-padded-tb-big i-container-small">
			<div class="ui container">
				<form  class="ui form segment">
					<div class="inline fields">
						<div class="field">
							<input type="text" name="title" placeholder="标题" id="title"/>
						</div>
						<div class="field">
							<div class="ui selection">
								<input type="hidden" name="type" />
								<div class="menu">
									<select id="select" placeholder="分类"></select>
								</div>
							</div>
						</div>
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox" name="recommend" id="recommend" />
								<label for="recommend">推荐</label>
							</div>
						</div>
						<div class="field">
							<button class="ui teal basic button" onclick="search()" type="button"><i class="search icon"></i>搜索</button>
						</div>
						<div class="field">
							<button class="ui teal basic button" onclick="reset()" type="button"><i class="reply icon"></i>重置</button>
						</div>
					</div>
				</form>
				<table id="blogTable"></table>
			</div>
		</div>

		<!--
        	作者：offline
        	时间：2019-09-19
        	描述：footer
        -->
		<div id="foot"></div>

	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
	<!-- axios -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="../static/js/function.js"></script>
	<script>
		$('.menu.toggle').click(function() {
			$('.i-item').toggleClass('i-mobile-hide');
		});

		$('.ui.dropdown').dropdown({
			on: 'hover'
		});

		$(function() {
			$('#head').load('../common/head-admin.html',null,function(){
				$('.navbarlist a').removeClass('active');
				$('.navbarlist a:eq(0)').addClass('active');
			});
			$('#foot').load('../common/foot.html');
			init();
			blogTable();
		})
		
/*		var vue = new Vue({
			el: '#logout',
			methods: {
				out: function() {
					axios({
						method: "get",
						url: "/blog-server/admin/logout",
					}).then((res) => {
						if(res.data.code == 0) {
							layer.msg(res.data.msg, {
								offset: 'rb',
								icon: 1,
								area: ['270px', '70px'],
								time: 3000
							}, function() {
								window.location.href = "../../homepage.html"
							})
						}
					});
				}
			}
		})*/
		var keyMap={"title":"","type_id":"","recommend":"","userId":$.cookie("userid")};

		function blogTable() {
			$("#blogTable").bootstrapTable({
				url: urlPath + '/blog/api/blogs',
				method: 'get',
				contentType: 'application/json',
				sidePagination: 'server',
				cache: false,
				sortOrder: 'desc',
				pageNumber: 1,
				paginationPreText: "上一页",
				paginationNextText: "下一页",
				rowStyle: function() {
					return {
						css: {
							"text-align": " center"
						}
					}

				},
				queryParams: function(params) {
					params.pageSize = this.pageSize;
					params.page = this.pageNumber;
					params.sort = "create_time";
					params.order = params.order;
					params.keyMap = JSON.stringify(keyMap);
					return params;
				},
				onLoadSuccess: function(data) {},
				onLoadError: function(status) {},
				onPageChange: function(number, size) {},
				striped: true,
				pagination: true,
				pageSize: 10,
				pageList: [10, 20, 50],
				minimumCountColumns: 2,
				columns: [{
						title: "序号",
						align: "center",
						formatter: function(value, row, index) {
							return index + 1;
						}
					},
					{
						title: "标题",
						align: "center",
						field: "title",
					},
					{
						title:"类型",
						align:"center",
						field:"typeName",
					},
					{
						title:"推荐",
						align:"center",
						formatter:function(value,row,index){
							if(row.recommend==true){
								return '是';
							}else{
								return '否';
							}
						}
					},
					{
						title:"更新时间",
						align:"center",
						field:"updateTime"
					},
					{
						title: "操作",
						align: "center",
						formatter: function(value, row, index) {
							var html = '<a href="blogs-input.html?type=edit&id=' + row.id + '" class="ui mini teal basic button">编辑</a>' +
								'<a href="javascript:void(0);" onclick="delete_blog(' + row.id + ')" class="ui mini red basic button">删除</a>';
							return html;
						}
					}
				],
			});
		}
		
		function search(){
			keyMap.title = $('#title').val();
			if($('#select').val() != "请选择"){
				keyMap.type_id = $('#select').val();
			}else{
				keyMap.type_id = "";
			}
			keyMap.recommend = $('input[name="recommend"]').prop("checked");
			if(keyMap.recommend == false){
				keyMap.recommend = '';
			}
			$("#blogTable").bootstrapTable('refresh',keyMap);
		}
		
		function init(){
			$.ajax({
				url:urlPath + "/type/api/listType",
				method:"get",
				async:false,
				success:function(res){
					if(res.code === 200){
						var html = $("#select");
						html.append("<option>请选择</option>");
						for(var i=0;i<res.data.length;i++){
							html.append("<option value=" +res.data[i].id+">"+ res.data[i].name +"</option>")
						}
					}
				}
			})
		}
		
		function delete_blog(id){
			layer.open({
				offset: 'auto',
				content: '确认删除吗?',
				btn: ['确认', '关闭'],
				yes: function(index, layero) {
					$.ajax({
						type:"get",
						url:urlPath + "/blog/api/delete_blog",
						data:{'id':id},
						success:function(res){
							propSuccess(res,function(){
								window.location.reload();
							})
						}
					});
					layer.closeAll();
				},
				btn2: function(index, layero) {
					layer.close();
				},
				shade: 0,
			})
		}
		
		function reset(){
			$('#title').val('');
			$('#type').val('');
			$('#recommend').val('');
		}
	</script>

</html>